layui.use(['table', 'laydate', 'form'], function () {
    let table = layui.table;
    let form = layui.form;
    let laydate = layui.laydate;

    //执行一个laydate实例
    laydate.render({
        elem: '#start' //指定元素
    });


    //执行一个laydate实例
    laydate.render({
        elem: '#end' //指定元素
    });

    // 创建渲染实例
    // 下面的代码理解为对ajax的封装
    tableRender({
        username: '',
        email: '',
        start: '',
        end: '',
        hobby: '',
        sex: '',
        phone: ''
    });
    // 触发单元格工具事件
    table.on('tool(table)', function (obj) { // 双击 toolDouble
        let data = obj.data;
        console.log(data);
        if (obj.event === 'del') {
            layer.confirm('真的删除行么', function (index) {
                let res = myAjax("http://127.0.0.1:8080/back/user/delete", {id: data.id}, "post");
                // res是否有值，如果没有，则提示失败
                if (res != null && res.count > 0) {
                    obj.del();
                    layer.close(index);
                } else {
                    layer.msg("删除失败");
                }
                // layer.confirm('是否已经确定真的删除行么', function (index) {
                //     let res = myAjax("/delete", {id: data.id}, "post");
                //     // res是否有值，如果没有，则提示失败
                //     if (res != null && res.count > 0) {
                //         obj.del();
                //         layer.close(index);
                //     } else {
                //         layer.msg("删除失败");
                //     }
                // });

            });
        } else if (obj.event === 'edit') {
            sessionStorage.setItem("userId", data.id);
            xadmin.open('编辑用户', 'http://127.0.0.1:8081/html/user/user-edit.html', 600, 400)
            // layer.open({
            //     title: '编辑',
            //     type: 1,
            //     area: ['80%', '80%'],
            //     content: '<div style="padding: 16px;">自定义表单元素</div>'
            // });
        }
        // else if (obj.event === 'password') {
        //     layer.open({
        //         title: '密码修改',
        //         type: 1,
        //         area: ['80%', '80%'],
        //         content: '<div style="padding: 16px;">自定义表单元素</div>'
        //     });
        // }
    });

    function tableRender(data) {
        table.render({

            elem: '#table'//js#一般对应id
            , url: 'http://127.0.0.1:8080/back/user/findAll' // 此处为静态模拟数据，实际使用时需换成真实接口
            , height: 'full-200' // 最大高度减去其他容器已占有的高度差
            , cellMinWidth: 80
            , page: true//开启分页
            , where: data
            , cols: [[
                // field 后端传递给前端的属性：dto
                {field: 'id', fixed: 'left', title: 'ID', sort: true}
                , {field: 'username', title: '用户名'}
                , {
                    field: 'email',
                    title: '邮箱 <i class="layui-icon layui-icon-email"></i>',
                    hide: 0,
                    edit: 'text'
                }
                // , {field: 'sex', width: 80, title: '性别', sort: true, templet: '#switchTpl'}
                , {
                    field: 'sex',
                    title: '性别',
                    sort: true,
                    // templet: '<div>{{' +
                    //     'd.sex==0?\'保密\':d.sex==1?\'男\':\'女\'}}' +
                    //     '</div>'
                }

                , {field: 'phone', title: '手机号'}
                , {field: 'birthday', title: '生日', sort: true}
                , {field: 'hobby', title: '爱好'}
                , {
                    field: 'enable', title: '启用停用', templet: function (d) {
                        return d.enable == 1 ? '启用' : '停用'
                    }
                }
                , {fixed: 'right', title: '操作', width: 220, toolbar: '#barDemo'}
            ]]
        })
    }

    form.on('submit(sreach)', function (data)  {
        data = data.field;

        let hobbys = [];
        $("input[type=checkbox][name=hobby]:checked").each(function (index, data) {
            hobbys.push(data.title);
        })
        data.hobby = hobbys.toLocaleString();
        console.log(data);
        tableRender(data);
        return false;
    })
});